<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>
    <style>
      div {
        padding: 50px;
      }

      .father {
        background: hotpink;
      }

      .son {
        background: khaki;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 注意：方法名后面的圆括号可以省略不写,但是如果你需要传参就必须写 -->
      <div class="father" @click="outer">
        <!-- 阻止事件冒泡 -->
        <div class="son" @click.stop="inner"></div>
      </div>

      <!-- 默认行为：a跳转 submit提交 选择文字 回车换行 右键菜单 -->
      <a href="http://www.baidu.com" @click.prevent="show">百度</a>

      <!-- 事件只能触发一次 -->
      <p @click.once="change">变了: {{ num }}</p>
      <!-- 回车事件 -->
      <!-- <input type="text" @keyup.13="submit"> -->
      <input type="text" @keyup.enter="submit" />
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        num: 0,
      },
      methods: {
        outer() {
          alert("父节点");
        },
        inner() {
          alert("子节点");
        },
        show() {
          console.log("阻止了默认行为");
        },
        change() {
          this.num++;
        },
      },
    });
  </script>
</html>
